<!DOCTYPE html>
	<div id="student_table_div">
		<!-- 查询窗口 -->
		<div class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
           	<div class="modal-dialog" role="document">
                <div class="modal-content">
	                <div class="modal-header">
						<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
						<h4 class="modal-title" id="myModalLabel">查询</h4>
	                </div>
	               	<div class="modal-body">
	            	<!-- 以下为要查询的的内容 -->
	            	<div class="form-group text-center" >
	            			<select id="shearchyear" name="year" class="selectpicker" onchange="cxyear()" data-bind="value:queryCondition.year">
								<option style="display: none;"></option>
							</select>
							<select id="collegeId" name="college" class="selectpicker" onchange="profesions()"  data-bind="value:queryCondition.college">
								<option style="display: none;"></option>
							</select>
							<select id="profesionId" name="profesion" class="selectpicker" onchange="cxbanji()" data-bind="value:queryCondition.profesion">
								<option style="display: none;"></option>
							</select>
				
							<select id="tbClass" name="tbClassId" class="selectpicker" data-bind="value:queryCondition.tbclass" >
								 <option style="display: none;"></option> 
							</select>
				 </div>
	                <!-- 以上为要查询的内容 -->
					</div>
					<div class="modal-footer">
		                <button type="button"  class="btn btn-primary" data-dismiss="modal" data-bind="click:queryClick"><span class="glyphicon glyphicon-search" aria-hidden="true"></span>&nbsp;查询</button>
		                <button type="button" class="btn btn-default" onclick="qingkong()" data-dismiss="modal" data-bind="click:clearClick"><span class="glyphicon glyphicon-trash" aria-hidden="true"></span>&nbsp;清空</button>
	            	</div>
                </div>
                
           	</div>
		</div> 
		
		<!-- 工具栏 -->
		<div id="toolbar" class="btn-group">
			<button data-bind="click:addClick" type="button"
				class="btn btn-default">
				<span class="glyphicon glyphicon-plus" aria-hidden="true"></span>新增
			</button>
			<button data-bind="click:editClick" type="button"
				class="btn btn-default">
				<span class="glyphicon glyphicon-pencil" aria-hidden="true"></span>修改
			</button>
			<button data-bind="click:deleteClick" type="button"
				class="btn btn-default">
				<span class="glyphicon glyphicon-remove" aria-hidden="true"></span>删除
			</button>
			<button data-bind="click:searchClick" type="button"
				class="btn btn-default">
				<span class="glyphicon glyphicon-search" aria-hidden="true"></span><font id="bxiugai">选择班级</font>
			</button>
			<input class="btn btn-primary" data-toggle="modal" data-target="#excelmodal" type="button" value="批量导入" />
		</div>
		
		<!-- 表格，表头里定义了表要显示的字段，data-formatter 里只能跟一个方法名 -->
		<table id="mytable" data-bind="bootstrapTable:$root">
			<thead>
				<tr>
					<th data-checkbox="true"></th>
					<th data-field="tbClass" data-formatter="tbClassFormatter">班级</th> 
					<th data-field="username">学号</th>
					<th data-field="name">姓名</th>
					<th data-field="sex">性别</th>
					<th data-field="phone">电话</th>
					<th data-field="email">邮箱</th>
					<th data-field="addrs">住址</th>
					<th data-field="job">职务</th>
				</tr>
			</thead>
		</table>
	</div>
	
	<div class="modal fade" id="excelmodal">
	   <div class="modal-dialog" >
	       <div class="modal-content">
	          <div class="modal-header">
	                导入学生信息
	               <button class="close"  data-dismiss="modal"><span>&times;</span></button>
	          </div>
	          <div class="modal-body">
                  <form id="importForm" action="student/excelimport" method="post" enctype="multipart/form-data"
						class="form-search" style="padding-left:20px;text-align:center;" onSubmit="loading('正在导入，请稍等...');"><br/>
					    <span style=" margin-left:35px;float:left; line-height:30px; height:30px;">请选择上传文件：</span>
			            <input id="uploadFile" name="file" type="file" style=" width:300px;border:1px solid #ccc; margin-left:140px;" ><br/><br/>　 　
						<input id="btnImportSubmit" class="btn btn-primary" onclick="upeload();" value="   导    入   "/>
						<a href="static/excel/student.xls">下载模板</a>
		          </form>
              </div>
	       </div>
	   </div>
	</div>
<!-- 以下是javascript内容 -->	
<script type="text/javascript">
	/* 以下是查询需要用到的 */
	$('#shearchyear').selectpicker({
		title:'选择年级',
		width:120
	});
	$('#collegeId').selectpicker({
		title:'选择学院',
		width:120
	});
	$('#profesionId').selectpicker({
		title : '选择专业',
		width:120
	});
	$('#tbClass').selectpicker({
		title : '选择班级',
		width:120
	});
	
	
	
$(function(){
    var data =  {
		    tableParams : {
		    	url : 'student/page'
		    	},
		    	urls : {
		    		delete : 'student/delete',
		    		update : 'student/edits',
		    		add : 'student/edits',
		    		search:'student/search'
		    	},
		    	queryCondition : {
		    		year : '',
		    		profesion : '',
		    		tbclass : ''
		    	}
		};
		ko.applyBindings(new BsTableViewModel(data),document.getElementById('student_table_div'));	
		
});
function typeformatter(value,row,index){
	return value==0?'平时考核':'期末考试';
}
function tbClassFormatter(value,row,index){
	  return value?value.name:'';
}

	$(function(){
		//查询时把所有年级显示出来
		$.post('student/years',function(data){
			 for (var i = 0; i < data.length; i++){
	    			$('#shearchyear').append("<option value=" + data[i] + "> "+data[i] +"</option>"); 
	    	}
			 $('#shearchyear').selectpicker('val',shearchyear); 
			 $('#shearchyear').selectpicker('refresh');
		});
	});
	
	
	 	//当年级发生改变时加载所有专业
      function cxyear(){
    	  var year=$('#shearchyear').val();
    	  $('#collegeId').empty();
    	  $.post('student/college',{year:year},function(data){
    		  for (var i = 0; i < data.length; i++){
    			  $('#collegeId').append("<option value=" + data[i] + "> "+data[i] +"</option>"); 
    		  }
    		  $('#collegeId').selectpicker('val',collegeId); 
    		  $('#collegeId').selectpicker('refresh');
    	  });
      } 
		
	 function profesions(){
   	  	var year=$('#shearchyear').val();
   	  	var college=$('#collegeId').val();
   	  	$('#profesionId').empty();
   	  	$.post('student/profesions',{college:college,year:year},function(data){
   	  		for(var i=0 ;i<data.length;i++){
	   	  		$('#profesionId').append("<option value=" + data[i].profesion + "> "+data[i].profesion +"</option>");
   	  		}
   	  	$('#profesionId').selectpicker('val',profesionId); 
		  $('#profesionId').selectpicker('refresh');
   	  	});
	} 
       //当年级、学院、专业发生改变时加载所有班级
      function cxbanji(){
    	  var year=$('#shearchyear').val();
    	  var profesion=$('#profesionId').val();
    	  $('#tbClass').empty();
    	  $.post('student/banji',{year:year,profesion:profesion},function(data){
    		  for (var i = 0; i < data.length; i++){
    			  $('#tbClass').append("<option value=" + data[i].name + "> "+data[i].name +"</option>"); 
    		  }
    		  $('#tbClass').selectpicker('val',tbClass); 
    		  $('#tbClass').selectpicker('refresh');
    	  });
      }
	 
	
	
	function qingkong(){
		
		$('#profesionId').empty();
		$('#tbClass').empty();
		$("#bxiugai").html('选择班级');
	}
	function upeload() {
		  var formData = new FormData($("#importForm")[0]);
	    $.ajax({
//	        async : flase,
//	        cache : flase,
	        type : "post",
	        data : formData,
	        url : 'student/excelimport',   //ajax上传的路径
	        dataType : 'text',
	        contentType: false, //必须，告诉jquery不要设置Content-Type请求头
	        processData: false, //必须，告诉jquery不要处理发送的数据
	        success : function(data) {
	      		$('#excelmodal').modal("hide");
	      		bootbox.alert(data);
 				$('#student_table_div').find('table').bootstrapTable('refresh'); //刷新表格
	        }
	    });
	}
</script>
